<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击获取验证码</button>

    <script>
        var btn = document.querySelector('button'); // 获取按钮
        var t = 0; // 准备一个变量 用来存放 第几个定时器 
        var flag = true; // 准备一个开关 
        btn.onclick = function(){
            if(flag == false){
                return
            }
            // 让按钮失效   
            // button中间的内容换成 重新获取 10 秒
            // 准备倒计时 
            var count = 10; //准备倒计时
            btn.innerText = `重新获取${count}秒`;
            //按钮的内容重新赋值 
            flag = false; // 我正在获取 其它的不能在获取 
            // 关上开关
            t = setInterval(function(){ 
                //倒计时的效果需要定时器模拟
                count--;
                btn.innerText = `重新获取${count}秒`;
                if(count <= 0){  //如果小于等于0
                    clearInterval(t); // 定时器结束
                    btn.innerText = `点击获取验证码`; // 重新赋值按钮的内容
                    flag = true;// 我已经结束 其它的可以获取了
                }
            },1000);
        }
    </script>
</body>
</html>